<template>
<div>  
<table>

    <!--  action="https://jsonplaceholder.typicode.com/posts/" -->
    <tr>
      <td >厂牌型号：<input type="text" v-model="form.brandmodel" /></td>
      <td>车牌号：<input type="text" v-model="form.licenseplatenumber" /></td>
    </tr>
      <tr>
      <td>司机名称：<input type="text" v-model="form.driversname" /></td>
      <td>所属公司：<input type="text" v-model="form.company" /></td>
    </tr>
      <tr>
      <td>车型：<input type="text" v-model="form.model" /></td>
      <td>车辆颜色：<input type="text" v-model="form.vehiclecolor" /></td>
    </tr>
      <tr>
      <td>购置日期：<input type="date" v-model="form.purchasedate" /></td>
      <td>运营证号：<input type="text" v-model="form.operationcertificatenumber" /></td>
    </tr>
      <tr>
      <td>保险到期日期：<input type="date" v-model="form.insuranceexpirationtime" /></td>
      <td>年检到期日期：<input type="date" v-model="form.annualInspectionexpirationtime" /></td>
    </tr>
      <tr>
      <td>保养公里数：<input type="text" v-model="form.maintenancekilometersettings" /></td> 
    </tr>
      <tr> 
<td>
  车辆照片：<input type="text" v-model="form.vehiclephotos">
</td>
    </tr>

      <tr> 
        <td>
          保险卡照片：<input disabled type="text" v-model="form.insuranceCardPhotos">
        </td>
        <td>


            <el-upload
  class="upload-demo"
  action="https://localhost:44357/WeatherForecast/UpImage"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-change="tupiantttt"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>


        </td>
    </tr>
      <tr>
      <td><input type="button" @click="tianjia()" value="提交" /></td>
      <td><input type="text" value="取消"/></td>
    </tr>
  </table>  
</div>
</template>
<script>
  export default {
    data() {
      return {
          span:[],
           fileList: [],
      form:{
     brandmodel : "" ,
     licenseplatenumber :   "",
      driversname :  "" ,
      company :  "" ,
      model :  "" ,
      vehiclecolor :  "" ,
      purchasedate :  " ",
      operationcertificatenumber :  "" ,
      insuranceexpirationtime :  "",
      annualInspectionexpirationtime :  " ",
      maintenancekilometersettings :  " ",
      vehiclephotos :  "" ,
      insuranceCardPhotos :  " ",
      zhuangtai : 1, 
      }
      };
    },
    created(){
    },
    methods: {
         handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
       tupiantttt(file, fileList){
this.span=[];
fileList.forEach(item => {
    this.span.push(item.name);
});
        },
  //     xinashishow() {
  //     var id=  localStorage.getItem("saihfkns");
  //  this.$http.get("https://localhost:44357/WeatherForecast/CheLiangGuanLiFanTian?id="+id).then(res=>{
  //    this.form=res.data.data;

  //  })
  //   }
  tianjia(){

if(this.form.brandmodel==null&&this.form.licenseplatenumber==null&&this.form.maintenancekilometersettings==null&&this.form.vehiclephotos==null&&this.form.insuranceCardPhotos==null)
{
  alert("不能为空");
  return;
}


  this.form.insuranceCardPhotos=this.span.join(',');


   this.$http.post('https://localhost:44357/WeatherForecast/CheliangCreate',this.form).then(a=>{
     if(a.data.code==200)
     {
       alert(a.data.mess);
       this.$router.push("/CheLiangXianShi")
     }
     else{
          alert(a.data.mess);
     }
    
   })
  }
    }
  };
</script>